<template>
  <div>
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

     <!-- card -->
     <el-card>
         <el-row>
             <el-col>
                 <el-button type="primary" @click="showAddDialog">
                     添加分类
                 </el-button>

             </el-col>
         </el-row>
         <!-- table-tree -->
         <tree-table :data = "catelist" :columns = "columns" 
         :selection-type="false" :expand-type="false" show-index index-text="#" border> 
         <!-- 作用域插槽 -->
         <template slot="treetemplate" slot-scope="scope">
             <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false" ></i>
             <i class="el-icon-error" style="color: red" v-else></i>
         </template>
         <!-- 排序 -->
         <template slot="order" slot-scope="scope">
             <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
             <el-tag size="mini" type="danger" v-else-if="scope.row.cat_level=== 1">二级</el-tag>
             <el-tag size="mini" type="warning" v-else="scope.row.cat_level=== 2">三级</el-tag>
         </template>
         <!-- 操作 -->
         <template slot="opt" slot-scope="scope">
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="editcate(scope.row)">编辑</el-button>
             <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
         </template>


         </tree-table>
         <!-- 导航条 -->
      <el-pagination class="margin"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addformdialogVisible" width="50%"  @close = "addformclose">
    <el-form :model="addcate"  :rules="addcateRules" label-width="100px" ref="addformRef">
      <el-form-item label="添加商品名:" prop="cat_name">
          <el-input v-model="addcate.cat_name"></el-input>
      </el-form-item>
      <!-- 添加父级分类 级联选择器 -->
      <el-form-item label="父级分类名:" >
           <el-cascader expand-trigger="hover" v-model="selectparent" :options="parentlist" :props="cascaderProps"
    @change="handleChange" clearable change-on-select></el-cascader>
      </el-form-item>

  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addformdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sendaddform">确 定</el-button>
  </span>
</el-dialog>
<!-- 编辑窗口 -->

<el-dialog title="编辑分类" :visible.sync="editdialogvisible" width="50%">
    <el-form :model="editgetid"  :rules="editcatelistRules" label-width="100px" ref="editcatelistRef">
      <el-form-item label="当前商品名:" prop="cat_name" >
          <el-input v-model="editgetid.cat_name" disabled></el-input>
      </el-form-item>
      <!-- 添加父级分类 级联选择器 -->
      <el-form-item label="父级分类名:" >
           <el-cascader expand-trigger="hover" v-model="editselectparent" :options="parentlist" :props="cascaderProps"
    @change="editChange" clearable change-on-select></el-cascader>
      </el-form-item>

  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogvisible = false">取 消</el-button>
    <el-button type="primary" @click="sendeditcate">确 定</el-button>
  </span>
</el-dialog>



     </el-card>
  </div>
</template>

<script>
export default {
    data(){
        return {
            // 请求的属性
            querInfo:{
                pagenum:1,
                pagesize:5,
                type:3
            },
            // 商品列表
            catelist:[],
            total:0,
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },
                // 定义作用域插槽
                {
                    label:'有否有效',
                    type:'template',
                    template:'treetemplate'
                },
                {
                    label:'排序',
                    type:'template',
                    template:'order'
                },
                {
                    label:'操作',
                    type:'template',
                    template:'opt'
                },
            ],
            // 展示添加分类窗口
            addformdialogVisible:false,
            // 添加商品对象
            addcate:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            //添加商品的校验规则
            addcateRules:{
                cat_name:[{required :true, message :'请输入用户名',trigger:'blur'}]
            },
            parentlist:[],
            // 父级分类指定的显示属性
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },

            // 保存父级菜单选中项
            selectparent:[],


            // 编辑选中的用户
            // 显示编辑窗口
            editdialogvisible:false,
            // 编辑id
            editgetid:[],
            editselectparent:[],
            // 编辑的效验
            editcatelistRules:{
                cat_name:[{
                    required :true, message :'请输入用户名',trigger:'blur'
                }]
            },
            // 保存父级菜单选

            
            


        }

    },
    created(){
        this.getcatelist()

    },
    methods:{
        // 获取商品列表
       async getcatelist(){
           const {data:res} = await this.$http.get('categories',{params:this.querInfo
            })
           
            if(res.meta.status !== 200){
                return this.$message.error('获取失败')
            }this.catelist = res.data.result
            this.total = res.data.total
            
        },
       
        // 分页功能实现
        handleSizeChange(newsize){
            this.querInfo.pagesize = newsize
            this.getcatelist()
            
        },
        // 当前页面的改变
        handleCurrentChange(currentsize){
            this.querInfo.pagenum = currentsize
            this.getcatelist()
           
        },
        // 显示添加列表
        showAddDialog(){
            this.getparentlist()

            this.addformdialogVisible = true
        },
        // 获取父级分类
        async getparentlist(){
          const {data:res} = await this.$http.get('categories',{params:{
                type:2
            }})
            if(res.meta.status !== 200){return this.$http.error('获取失败')
            }
            this.parentlist = res.data
        },
        // 接收父级菜单改变
        handleChange(){
            
            if(this.selectparent.length > 0){
                this.addcate.cat_pid = this.selectparent[this.selectparent.length -1]
                this.addcate.cat_level= this.selectparent.length
            }else{
                this.addcate.cat_pid = 0
                this.addcate.cat_level= 0
            }
        },
        changeparent(){
           
        },
        // 清空add表单
        addformclose(){
            this.$refs.addformRef.resetFields()
            this.selectparent = []
            this.addcate.cat_level = 0
            this.addcate.cat_pid = 0
        },
        // 提交数据
        sendaddform(){
            this.$refs.addformRef.validate(async vali => {
                if(!vali) return 
            const {data:res} = await this.$http.post('categories',this.addcate)
            if(res.meta.status !== 201){
                return this.$message.error('提交失败')
            }this.$message.success('添加成功')
            this.getcatelist()
            this.addformdialogVisible = false
            })
        },
        // 编辑事件
       async editcate(scope){
            this.getparentlist()
            this.editgetid = scope
         const {data:res} = await this.$http.get('categories/' + this.editgetid.cat_id)
         if(res.meta.status !== 200){
             return this.$message.error('获取失败')
         }
         
            this.editdialogvisible = true
        },
        // 监听edit change事件
        editChange(){
            
            if(this.editselectparent.length > 0){
                this.editgetid.cat_pid = this.editselectparent[this.editselectparent.length -1]
                this.editgetid.cat_level = this.editselectparent.length
            }else{
                this.editgetid.cat_pid = 0
                this.editgetid.cat_level = 0
            }

        },
       async sendeditcate(){
          const {data:res} = await this.$http.put('categories/' + this.editgetid.cat_id,{
              params:this.editgetid
          } )
          if(res.meta.status !== 200){
              return this.$message.error()
          }


        }


    }

}
</script>

<style lang="less" scoped>
.zk-table {
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>>

